<template>
  <div class="same-europe-18w-return-test-page">
    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>欧赔合理性回测</span>
          <el-button
            type="text"
            @click="store.toggleSearch"
            :icon="store.isSearchCollapsed ? 'ArrowDown' : 'ArrowUp'"
          >
            {{ store.isSearchCollapsed ? '展开' : '收起' }}
          </el-button>
        </div>
      </template>

      <el-collapse-transition>
        <div v-show="!store.isSearchCollapsed">
          <el-form
            :model="store.searchForm"
            :inline="true"
            class="search-form"
            label-width="130px"
          >
            <!-- 赛事名称 -->
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="赛事名称">
                  <el-input
                    v-model="store.searchForm.event_name"
                    placeholder="请输入赛事名称"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 主队赔率和差值范围 -->
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="主队赔率最小">
                  <el-input-number
                    v-model="store.searchForm.home_initial_min"
                    :min="0"
                    :precision="2"
                    :step="0.01"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="最小值"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="主队赔率最大">
                  <el-input-number
                    v-model="store.searchForm.home_initial_max"
                    :min="0"
                    :precision="2"
                    :step="0.01"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="最大值"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="主队赔率差值最小">
                  <el-input-number
                    v-model="store.searchForm.home_diff_min"
                    :precision="2"
                    :step="0.01"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="最小值"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="主队赔率差值最大">
                  <el-input-number
                    v-model="store.searchForm.home_diff_max"
                    :precision="2"
                    :step="0.01"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="最大值"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 平局赔率和差值范围 -->
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="平局赔率最小">
                  <el-input-number
                    v-model="store.searchForm.draw_initial_min"
                    :min="0"
                    :precision="2"
                    :step="0.01"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="最小值"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="平局赔率最大">
                  <el-input-number
                    v-model="store.searchForm.draw_initial_max"
                    :min="0"
                    :precision="2"
                    :step="0.01"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="最大值"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="平局赔率差值最小">
                  <el-input-number
                    v-model="store.searchForm.draw_diff_min"
                    :precision="2"
                    :step="0.01"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="最小值"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="平局赔率差值最大">
                  <el-input-number
                    v-model="store.searchForm.draw_diff_max"
                    :precision="2"
                    :step="0.01"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="最大值"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 客队赔率和差值范围 -->
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="客队赔率最小">
                  <el-input-number
                    v-model="store.searchForm.away_initial_min"
                    :min="0"
                    :precision="2"
                    :step="0.01"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="最小值"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="客队赔率最大">
                  <el-input-number
                    v-model="store.searchForm.away_initial_max"
                    :min="0"
                    :precision="2"
                    :step="0.01"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="最大值"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="客队赔率差值最小">
                  <el-input-number
                    v-model="store.searchForm.away_diff_min"
                    :precision="2"
                    :step="0.01"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="最小值"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="客队赔率差值最大">
                  <el-input-number
                    v-model="store.searchForm.away_diff_max"
                    :precision="2"
                    :step="0.01"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="最大值"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 查询按钮 -->
            <el-row>
              <el-col :span="24" style="text-align: center">
                <el-button type="primary" @click="store.handleSearch" :loading="store.loading">
                  <el-icon><Search /></el-icon>
                  查询
                </el-button>
                <el-button @click="store.handleReset">
                  <el-icon><Refresh /></el-icon>
                  重置
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>

    <!-- 统计数据区域 -->
    <el-card class="statistics-card" v-if="store.statisticsData" shadow="never">
      <template #header>
        <div class="card-header">
          <span>统计分析</span>
        </div>
      </template>
      
      <div class="statistics-content">
        <el-row :gutter="20" class="stats-main">
          <el-col :span="4">
            <div class="stat-item">
              <div class="stat-label">总场次</div>
              <div class="stat-value">{{ store.statisticsData.total_matches }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-item">
              <div class="stat-value">{{ store.statisticsData.home_win_rate }}%</div>
              <div class="stat-label">主胜场次</div>
              <div class="stat-rate">{{ store.statisticsData.home_wins }}</div>
              
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-item">
              <div class="stat-value">{{ store.statisticsData.draw_rate }}%</div>
              <div class="stat-label">平局场次</div>
              <div class="stat-rate">{{ store.statisticsData.draws }}</div>
              
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-item">
              
              <div class="stat-value">{{ store.statisticsData.away_win_rate }}%</div>
              <div class="stat-label">客胜场次</div>
              <div class="stat-rate">{{ store.statisticsData.away_wins }}</div>
              
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>查询结果</span>
          <span class="total-info" v-if="store.total > 0">
            共 {{ store.total }} 条记录
          </span>
        </div>
      </template>

      <el-table
        :data="store.tableData"
        v-loading="store.loading"
        stripe
        style="width: 100%"
        :header-cell-style="{background: '#fafafa', color: '#606266', 'text-align': 'left'}"
        :cell-style="{'text-align': 'left'}"
        fit="true"
        :row-key="row => row.fid"
        :expand-row-keys="Array.from(expandedRows)"
        :default-expand-all="false"
        @sort-change="handleSortChange"
      >
        <el-table-column type="expand" width="1">
          <template #default="{ row }">
            <div class="odds-details-expand">
              <EuropeOddsTable 
                :odds-data="getOddsData(row)" 
                :title="`${row.event_name} - ${row.homesxname} VS ${row.awaysxname}`"
              />
            </div>
          </template>
        </el-table-column>
      <el-table-column prop="matchtime" label="时间" width="160" show-overflow-tooltip align="left" sortable="custom" />  
      <el-table-column prop="event_name" label="赛事" width="60"  show-overflow-tooltip align="left" sortable="custom" />
      <el-table-column prop="homesxname" label="主队" show-overflow-tooltip align="left" sortable="custom" />
      <el-table-column prop="awaysxname" label="客队" show-overflow-tooltip align="left" sortable="custom" />
      <el-table-column prop="homescore" label="主分" width="60" align="left" sortable="custom" />
      <el-table-column prop="awayscore" label="客分" width="60" align="left" sortable="custom" />
        
        
        <el-table-column prop="home_initial" label="主初赔" width="70" align="left" sortable="custom">
          <template #default="{ row }">
            {{ row.home_initial ? row.home_initial.toFixed(3) : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="theory_home_initial" label="理论主初" width="80" show-overflow-tooltip align="left" sortable="custom">
          <template #default="{ row }">
            {{ row.theory_home_initial ? row.theory_home_initial.toFixed(3) : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="home_diff" label="主差值" width="70" show-overflow-tooltip align="left" sortable="custom">
          <template #default="{ row }">
            {{ row.home_diff ? row.home_diff.toFixed(3) : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="draw_initial" label="平初赔" width="70" show-overflow-tooltip align="left" sortable="custom">
          <template #default="{ row }">
            {{ row.draw_initial ? row.draw_initial.toFixed(3) : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="theory_draw_initial" label="理论平初" width="80" show-overflow-tooltip align="left" sortable="custom">
          <template #default="{ row }">
            {{ row.theory_draw_initial ? row.theory_draw_initial.toFixed(3) : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="draw_diff" label="平差值" width="70" show-overflow-tooltip align="left" sortable="custom">
          <template #default="{ row }">
            {{ row.draw_diff ? row.draw_diff.toFixed(3) : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="away_initial" label="客初赔" width="70" show-overflow-tooltip align="left" sortable="custom">
          <template #default="{ row }">
            {{ row.away_initial ? row.away_initial.toFixed(3) : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="theory_away_initial" label="理论客初" width="80" show-overflow-tooltip align="left" sortable="custom">
          <template #default="{ row }">
            {{ row.theory_away_initial ? row.theory_away_initial.toFixed(3) : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="away_diff" label="客差值" width="70" show-overflow-tooltip align="left" sortable="custom">
          <template #default="{ row }">
            {{ row.away_diff ? row.away_diff.toFixed(3) : '-' }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="返还率" width="90" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.return_rate ? row.return_rate.toFixed(3) : '-' }}
          </template>
        </el-table-column> -->
        <el-table-column prop="total_matches" label="总场数" width="70" align="left"/>
        <el-table-column prop="home_win_count" label="主胜" width="70" align="left"/>
        <el-table-column prop="draw_count" label="平局" width="70" align="left"/>
        <el-table-column prop="away_win_count" label="客胜" width="70" align="left"/>
        <el-table-column prop="home_win_rate" label="主胜率" width="70" show-overflow-tooltip align="left" sortable="custom">
          <template #default="{ row }">
            {{ row.home_win_rate ? row.home_win_rate.toFixed(3) : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="draw_rate" label="平局率" width="70" show-overflow-tooltip align="left" sortable="custom">
          <template #default="{ row }">
            {{ row.draw_rate ? row.draw_rate.toFixed(3) : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="away_win_rate" label="客胜率" width="70" show-overflow-tooltip align="left" sortable="custom">
          <template #default="{ row }">
            {{ row.away_win_rate ? row.away_win_rate.toFixed(3) : '-' }}
          </template>
        </el-table-column>

        <!-- 赔率详情按钮列 -->
        <el-table-column label="操作" width="100" fixed="right" align="left">
          <template #default="{ row }">
            <el-button
              type="text"
              size="small"
              @click="toggleRowExpansion(row)"
            >
              {{ expandedRows.has(row.fid) ? '收起详情' : '赔率详情' }}
            </el-button>
          </template>
        </el-table-column>
     
        
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-wrapper" v-if="store.total > 0">
        <el-pagination
          :current-page="store.currentPage"
          :page-size="store.searchForm.page_size"
          :page-sizes="[10, 20, 50, 100]"
          :total="store.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="store.handleSizeChange"
          @current-change="store.handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { useEuropeReturnTestStore } from '@/pinia/stores/europeReturnTestStore'
import EuropeOddsTable from './components/EuropeOddsTable.vue'

// 使用 store
const store = useEuropeReturnTestStore()

// 跟踪展开的行和对应的数据
const expandedRows = ref(new Set())
const oddsDataMap = ref(new Map()) // 存储每行的赔率数据

// 检查某行是否展开
const isRowExpanded = (row: any) => {
  return expandedRows.value.has(row.fid) // 假设 fid 是唯一标识符
}

// 切换行展开状态
const toggleRowExpansion = async (row: any) => {
  const fid = row.fid
  if (expandedRows.value.has(fid)) {
    // 收起行
    expandedRows.value.delete(fid)
  } else {
    // 展开行，首先获取赔率数据
    if (!oddsDataMap.value.has(fid)) {
      // 如果还没有获取过赔率数据，则调用API获取
      const oddsData = await store.getOddsDataByFid(fid)
      oddsDataMap.value.set(fid, oddsData)
    }
    expandedRows.value.add(fid)
  }
}

// 获取赔率数据 - 从存储中获取
const getOddsData = (row: any) => {
  return oddsDataMap.value.get(row.fid) || []
}

// 处理排序变化
const handleSortChange = (params: { prop: string, order: 'ascending' | 'descending' | null }) => {
  store.handleSortChange(params)
}

// 生命周期
onMounted(() => {
  // 初始化页面数据
  // store.initializePage()
})
</script>

<style scoped>
.same-europe-18w-return-test-page {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.statistics-card {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-info {
  color: #909399;
  font-size: 14px;
}

.search-form {
  padding: 20px 0;
}

.text-center {
  text-align: center;
  line-height: 32px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 统计区域样式 */
.statistics-content {
  padding: 20px 0;
}

.stats-main {
  display: flex;
  justify-content: space-around;
}

.stat-item {
  text-align: center;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  flex: 1;
  margin: 0 10px;
}

.stat-label {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 5px;
}

.stat-rate {
  font-size: 12px;
  color: #7f8c8d;
}

/* 隐藏默认的展开图标 */
:deep(.el-table__expand-icon) {
  display: none;
}

/* 确保展开行样式正确 */
:deep(.el-table__expanded-cell) {
  padding: 0 !important;
  background-color: transparent;
}

.odds-details-expand {
  padding: 20px;
  background-color: #f5f7fa;
  margin: 10px 0;
  border-radius: 4px;
}

/* 表格整体样式调整，减少边距 */
:deep(.el-table) {
  width: 100% !important;
  box-sizing: border-box;
  margin-left: 0;
  padding-left: 0;
}

/* 调整单元格内边距以减少空白 */
:deep(.el-table .el-table__cell) {
  padding: 4px 0;
}

/* 调整表头单元格内边距 */
:deep(.el-table th.el-table__cell) {
  padding: 4px 0;
}

/* 调整第一列的左边距 */
:deep(.el-table .el-table__cell:first-child) {
  padding-left: 0;
}

/* 调整表头第一列的左边距 */
:deep(.el-table th.el-table__cell:first-child) {
  padding-left: 0;
}

</style>